---
import Layout from "@/components/Layout.astro";
import { Countdown } from "@/components/Countdown";
import WorldHeatmap from "@/components/WorldHeatmap";
import TechStack from "@/components/TechStack";
const VISITED_PLACES = [
  "中国-北京",
  "中国-天津",
  "中国-广东",
  "中国-河北",
  "中国-山东",
  "中国-重庆",
];
---

<Layout
  title="关于我"
  description="展示我的旅行足迹和一些有趣的个人信息"
  skipSrTitle={false}
>
  <div class="min-h-screen py-12">
    <div class="container mx-auto px-4 max-w-6xl">
      <!-- Retirement Clock at Top -->
      <section class="mb-16">
        <div
          class="bg-white dark:bg-[#0f172a] rounded-2xl p-8 shadow-lg text-center border border-gray-200 dark:border-gray-700"
        >
          <div class="text-4xl mb-4">⏰</div>
          <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">
            距离退休还有
          </h2>
          <Countdown client:load targetDate={"2070-04-06"} />
        </div>
      </section>

      <!-- Tech Stack Section -->
      <section class="mb-20">
        <TechStack client:load />
      </section>

      <!-- Travel Map -->
      <section>
        <div class="bg-white dark:bg-[#0f172a] rounded-2xl p-8 shadow-lg border border-gray-200 dark:border-gray-700">
          <div class="text-center mb-6">
            <div class="text-4xl mb-4">🗺️</div>
            <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
              我的旅行足迹
            </h2>
          </div>
          <WorldHeatmap client:only="react" visitedPlaces={VISITED_PLACES} />
        </div>
      </section>
    </div>
  </div>
</Layout>
